<template>
	<div class="bigDiv">
		<el-card class="box-card1">
			<div slot="header" class="clearfix">
				<span>小区工作日记</span>
				<el-form :inline="true" label-width="100px" style="margin-top: 20px;">
					<el-form-item label="小区编码" prop="block">
						<el-input v-model="queryParams.block" placeholder="请输入小区编码" clearable size="small"
							@keyup.enter.native="getList" />
					</el-form-item>
					<el-form-item label="创建时间" prop="createTime">
						<el-date-picker v-model="queryParams.createTime" type="date" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期">
						</el-date-picker>
					</el-form-item>
					<el-button type="text" icon="el-icon-search" @click="getList" style="float:right;">搜索</el-button>
				</el-form>
			</div>
			<div class="content">
				<el-descriptions title="每日巡检" :column="3" border direction="vertical">
					<el-descriptions-item>
						<template slot="label" style="width: 100px;">
							<i class="el-icon-tickets"></i>
							巡检单编号
						</template>
						{{list.seqNo}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-tickets"></i>
							健身设施
						</template>
						{{list.desFitnessFacilities}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-tickets"></i>
							雨污水井
						</template>
						{{list.desRainwaterWells}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-tickets"></i>
							水箱间
						</template>
						{{list.desWaterTank}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-tickets"></i>
							变电所
						</template>
						{{list.desSubstation}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-tickets"></i>
							公共照明
						</template>
						{{list.desPublicLighting}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-tickets"></i>
							路面
						</template>
						{{list.desPavement}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-tickets"></i>
							公共区域
						</template>
						{{list.desPublicAreas}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-tickets"></i>
							楼宇门
						</template>
						{{list.desBuildingDoors}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-tickets"></i>
							泵房
						</template>
						{{list.desPumpRoom}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-tickets"></i>
							儿童游乐场
						</template>
						{{list.desPlayground}}
					</el-descriptions-item>



					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-tickets"></i>
							创建者
						</template>
						{{list.createBy}}
					</el-descriptions-item>
					<!-- <el-descriptions-item>
						<template slot="label">
							<i class="el-icon-tickets"></i>
							创建时间
						</template>
						{{list.createTime}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-tickets"></i>
							更新者
						</template>
						{{list.updateBy}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-tickets"></i>
							更新时间
						</template>
						{{list.updateTime}}
					</el-descriptions-item> -->
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-tickets"></i>
							小区编号
						</template>
						{{list.block}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-tickets"></i>
							备注
						</template>
						{{list.remark}}
					</el-descriptions-item>
				</el-descriptions>

				<el-descriptions title="已维修" :column="3" border style="margin-top: 20px;" direction="vertical">
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-tickets"></i>
							已维修
						</template>
						{{list.repairText2}}
					</el-descriptions-item>
				</el-descriptions>
				<el-descriptions title="未维修" :column="3" border style="margin-top: 20px;" direction="vertical">
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-tickets"></i>
							待维修
						</template>
						<p v-if="list.repairText1" style="white-space: pre-wrap;">{{list.repairText1 | lineBreak}}</p>
						<p v-else>{{list.repairText1}}</p>
					</el-descriptions-item>
				</el-descriptions>
				<el-descriptions title="缴费情况" :column="3" border style="margin-top: 20px;" direction="vertical">
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-tickets"></i>
							缴费信息
						</template>
						<p v-if="list.payText" style="white-space: pre-wrap;">{{list.payText | lineBreak}}</p>
						<p v-else>{{list.payText}}</p>
					</el-descriptions-item>
				</el-descriptions>
			</div>

		</el-card>


		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" />
	</div>
</template>

<script>
	import {
		selectRbb
	} from '@/api/wuye.js'
	// 上传文件
	import fileUpdata from '@/api/file.config'
	export default {
		name: "product",
		// 页面数据
		data() {
			return {
				queryParams: {
					pageNum: 1, // 显示第一页数据
					pageSize: 10, //每页显示十条
					block: '',
					createTime: ''
				},
				list: [{
					seqNo: '',
					desFitnessFacilities: '',
					desRainwaterWells: '',
					desWaterTank: '',
					desSubstation: '',
					desPublicLighting: '',
					desPavement: '',
					desPublicAreas: '',
					desBuildingDoors: '',
					desPumpRoom: '',
					desPlayground: '',
					repairText1: 'xxxx,xxxxx',
					repairText2: '',
					payText: 'xxxx,xxxxx',
					createBy: '',
					block: '',
					remark: '',
				}],
				total: 0
			};
		},
		filters: {
			lineBreak: function(data) {
				return data.replace(/<br>/g, '\n');
			}
		},
		// 初始化
		mounted() {
			this.getList();
		},
		// 函数集合
		methods: {
			//初始化列表
			getList() {
				console.log('queryParams.createTime',this.queryParams.createTime)
				this.loading = false;
				selectRbb({
					...this.queryParams
				}).then(res => {
					this.list = res.rows;
					// console.log('000', this.list)
					this.total = res.total
					var reg = /,/g;
					this.list[0].payText = this.list[0].payText.replace(reg, ",<br>");
				})
			},
			reset() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10
				}
			},
		},
	}
</script>
<style scoped lang='scss'>
	.bigDiv {
		margin: 10px;
	}

	.el-row {
		margin: 10px !important;
		height: calc(100vh - 150px);
	}

	.content {
		height: 80vh;
		margin-top: 0px;
	}

	::deep-v .el-descriptions-item__content {
		padding-bottom: 12px;
		height: 46px !important;
		line-height: 46px !important;

	}

	/* .box-card{
		width: 100%;
	} */
</style>